<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/weui.min.css">
    <title>微现场</title>
</head>
<body>
    <div class="main">
        <div class="bg"><img src="img/bg.jpg"></div>
        <div class="manCount">
            嘉宾人数：1221 人
        </div>
        <div class="contBox">
            <ul class="t">
                <li>
                    <i><img src="img/sigin.png" alt=""></i>
                    <p>签到</p>
                </li>
                <li>
                    <a href="shake.html">
                        <i><img src="img/shake.png" alt=""></i>
                        <p>摇一摇</p>
                    </a>
                </li>
            </ul>
            <div class="msgBox">
                <input type="text" id="msgInput" placeholder="发弹幕参与大屏互动">
                <div class="msgBtn">发送</div>
            </div>
        </div>
    </div>
    <script src="js/jquery-1.8.0.min.js"></script>
    <script src="js/moblie.helper.750.js"></script>
    <script src="js/weui.min.js"></script>
    <script src="js/barrageWall.js"></script>
    <script>
        $(".msgBtn").click(function () {
            var vla=$('#msgInput').val().replace(/(^\s*)|(\s*$)/g, "");
            if(vla){
              barrageWall.upWall("img/aq.png","二狗子",vla);//初始化弹幕墙
              $('#msgInput').val('')
              weui.toast('发送弹幕成功', 1000);
            }
          })

        $(function () {
            var option={
            container:".main",//弹幕墙的id
            barrageLen:8//弹幕的行数
            }
            barrageWall.init(option);//初始化弹幕墙
            var num=0,timer =setInterval(function(){
                num++;
                if(num>20){clearInterval(timer)}
                barrageWall.upWall("img/aq.png","二狗子"+num,"晚会真棒！我好喜欢");
            },500);
        })
        $(".contBox li").eq(0).click(function(){
                var loading  = weui.loading('正在签到...')
                setTimeout(function () {
                    loading.hide(function() {
                        weui.toast('签到成功',1000)
                     });
                }, 1000);
        })
        //部分安卓机型键盘弹出使上层div变形hack
        var _height = $(window).height()
        $(window).resize(function() {
            $(".bg").css('height',_height)
            $(".bg>img").css('height',_height)
        });
    </script>
</body>
</html>